<!DOCTYPE html>
<html lang="zh">

<head>
    <title>中国梦想游网站</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link href="/home/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="/home/css/common.css" rel="stylesheet" type="text/css"/>
    <link href="/home/css/order/common_css.css?cssVersion=1.9084" rel="stylesheet"/>
    <!--引入js文件-->
    <script type="text/javascript" src="/home/js/jquery-3.5.1.js"></script>
    <!--引入Vue和Axios-->
    <script src="/home/js/vue.js"></script>
    <script src="/home/js/axios.js"></script>
    <script type="text/javascript" src="/home/js/config.js"></script>
    <script>
        //订单支付时判断
        let payTime = 100;
        $(document).ready(function() {
            let order_id = $("#order_id").val();
            let countdownInterval; // 存储定时器ID
            // 更新倒计时显示
            function updateCountdown(startTime, duration) {
                let currentTime = Date.now();
                let remainingTime = startTime + duration * 1000 - currentTime;

                if (remainingTime > 0) {
                    let minutes = Math.floor(remainingTime / 60000);  // 分钟
                    let seconds = Math.floor((remainingTime % 60000) / 1000);  // 秒数
                    // 保存两位数字（拼接字符串）
                    let timeStr = minutes.toString().padStart(2, '0') + '分' + seconds.toString().padStart(2, '0') + '秒';
                    $('#ShowTime').text(timeStr);
                } else {
                    clearInterval(countdownInterval); // 清除定时器
                    let train_number = $("#train_number").val();
                    let departure_date = $("#departure_date").val();
                    $.ajax({
                        url: "/view/order/cancelOrder",
                        type: "POST",
                        data: {
                            "order_id": order_id,
                            "train_number": train_number,
                            "departure_date": departure_date
                        },
                        async:false,
                        success: function(msg) {
                            if (msg){
                                $("#ShowTime").text("订单已过期");

                            }else {
                                alert("订单超时取消失败!!!");
                            }
                        },
                        error:function (msg) {
                            alert("网络错误，请检查你的网络！")
                        }
                    });
                    payTime = 0;
                }
            }

        /*    // 获取订单的过期时间
            $.ajax({
                url: "/view/ticketing/expireTime",
                type: "POST",
                data: {order_id: order_id},
                async: false, // 使用同步请求确保在获取到过期时间后再开始倒计时
                success: function(response) {
                    let expireTime = parseInt(response);
                    let startTime = Date.now(); // 当前时间戳
                    let duration = expireTime; // 订单过期时间（单位：秒）

                    // 开始倒计时
                    countdownInterval = setInterval(function() {
                        updateCountdown(startTime, duration);
                    }, 1000);
                }
            });*/
        });


        //支付订单
        function paymentOrder(){
            if(payTime == 100){
                //提交表单
                $("#paymentForm").submit();
            }else {
                alert("当前订单已失效,请重新购买车票！！！");
                window.location.href = "http://localhost:80/index.html";
            }
        }

        //取消订单，用户取消订单
        function cancelOrder() {
           // 显示取消订单确认弹框
           $("#cancelOrder").css("display", "block");
            //如果确认取消
            $("#confirm_cancel").click(function() {
                //取消订单确认弹框
                $("#cancelOrder").css("display",'none');
                let order_id = $("#order_id").val();
                let train_number = $("#train_number").val();
                let departure_date = $("#departure_date").val();
                $.ajax({
                    url: "/view/order/cancelOrder",
                    type: "POST",
                    data: {
                        "order_id": order_id,
                        "train_number": train_number,
                        "departure_date": departure_date  },
                    success: function(msg) {
                        if (msg){
                            alert("取消订单成功！！");
                            window.location.href = "http://localhost:80/index.html";
                        }else {
                            alert("取消订单失败!!!");
                        }
                    },
                    error:function (msg) {
                        alert("网络错误，请检查你的网络！")
                    }
                });
            });
            //如果不取消
            $("#no_cancel").click(function() {
                // 隐藏取消订单确认弹框
                $("#cancelOrder").css("display",'none');
            });
        }



    </script>

</head>

<body>
<!--引入顶部文件-->
<div id="header"></div>
<script>
    // 使用AJAX加载头部文件
    $(function() {
        $.ajax({
            url: '/home/header.html',
            type: 'GET',
            success: function(data) {
                $('#header').html(data);
            },
            error: function() {
                console.log('加载头部文件失败');
            }
        });
    });
</script>
<!--订单支付页面-->
<div class="content" id="main_content" style="min-height: 830px;"><!--支付提示 开始-->
    <div class="t-succ t-lock">
        <div class="pay-tips"><span class="i-lock"></span>
            <h3><span>席位已锁定，请在提示时间内尽快完成支付，完成网上购票。<span>
        支付剩余时间：
        <strong class="colorA" v-if="!errorMsg"><strong id="ShowTime"></strong></strong>
        <!--订单失效提醒-->
        <strong class="colorA" v-if="errorMsg"><strong>{{ errorMsg }}</strong></strong>
        </span></span>
            </h3>
        </div>
    </div>
    <!--订单信息 开始-->
    <div class="layout b-info">
        <div class="lay-hd" style="background: #3b99fc;">订单信息</div>
        <div class="lay-bd">
            <div class="info" id="show_title_ticket">
                <strong class="mr5" >{{ orderInfo.departure_date }}</strong>
                <strong class="mr5" >{{ orderInfo.train_number }} 次 </strong>
                <strong class="ml5">{{ trainInfo.start_station }}</strong>站
                <strong>（{{ trainInfo.departure_time }}开）— {{ trainInfo.end_station }}</strong>站（ {{ trainInfo.arrive_time }}到）
                <strong name="zl_time_alert" style="display:block;color:#f80;font-weight: bold;font-size: 14px;">出发时间和到达时间为车站所在时区时间！</strong>
            </div>
            <table class="table-a" id="table_list">
                <tbody>
                <tr align="center">
                    <th width="40" rowspan="1" colspan="1"><strong>序号</strong>
                    </th>
                    <th width="75" rowspan="1" colspan="1"><strong>姓名</strong>
                    </th>
                    <th width="120" rowspan="1" colspan="1"><strong>证件类型</strong>
                    </th>
                    <th width="180" rowspan="1" colspan="1"><strong>证件号码</strong>
                    </th>
                    <th width="140" rowspan="1" colspan="1"><strong>票种</strong>
                    </th>
                    <th width="120" rowspan="1" colspan="1"><strong>席别</strong>
                    </th>
                    <th width="70" rowspan="1" colspan="1"><strong>车厢</strong>
                    </th>
                    <th width="70" rowspan="1" colspan="1"><strong>席位号</strong>
                    </th>
                    <th rowspan="1" colspan="1"><strong>票价（元）</strong>
                    </th>
                </tr>
                </tbody>
        <tbody id="show_ticket_message">
                    <tr v-for="ticket in orderInfo.tickets" :key="ticket.sort">
                        <td align="center">{{ ticket.sort }}</td>
                        <td>{{ ticket.passenger_name }}</td>
                        <td>{{ ticket.card_type }}</td>
                        <td>{{ ticket.card_code }}</td>
                        <td v-if="ticket.ticket_type ==0">成人票</td>
                        <td v-if="ticket.ticket_type ==1">儿童票</td>
                        <td v-if="ticket.ticket_type ==2">学生票</td>
                        <td>{{ ticket.seat_type_name }}</td>
                        <td>{{ ticket.carriage_number }}</td>
                        <td>{{ ticket.seat_number }}号</td>
                        <td>{{ ticket.ticket_price }} 元</td>
                    </tr>
                </tbody>
            </table>
            <div class="total-box" style="margin-top: 30px">
                <div class="item">总票价：<span class="price" id="total_ticket_price" >{{ orderInfo.total_price }} 元</span>
                </div>
            </div>


            <!--表单提交订单数据-->
            <form id="paymentForm" method="post" action="/home/order/toPay">
                <!--隐藏域（保存订单编号，后台获取数据）-->
                <input type="hidden" id="order_id" name="order_id" :value="orderInfo.order_id">
                <input type="hidden" id="train_number" name="train_number" :value="orderInfo.train_number">
                <input type="hidden" id="departure_date" name="departure_date" :value="orderInfo.departure_date">
            </form>
            <div class="lay-btn bt_blue">
                <p>
                    <a href="javascript:" class="btn92" id="cancelButton" @click="cancelOrder()" shape="rect" >取消订单</a>
                    <span><a href="javascript:" class="btn92s" id="payButton" @click="paymentOrder()" shape="rect" style="background: #ff8000" >去支付</a></span>
                </p>
            </div>
            <div class="tips-box"><p>
                <span>
                <code id="dcfc_wxts_1">
                <span style="font-weight:bold;color:black">温馨提示：</span><br clear="none">
		        	1. 请在指定时间内完成网上支付。<br clear="none">
	        		2. 逾期未支付，系统将取消本次交易。<br clear="none">
	        		3. 在完成支付或取消本订单之前，您将无法购买其他车票。<br clear="none">
	        		4. 退票费如下核收：开车前8天（含）以上退票的，不收取退票费；票面乘车站开车时间前48小时以上的按票价5%计，24小时以上、不足48小时的按票价10%计，不足24小时的按票价20%计。  开车前48小时～8天期间内，改签或变更到站至距开车8天以上的其他列车，又在距开车8天前退票的，仍核收5%的退票费。 办理车票改签或“变更到站”时，新车票票价低于原车票的，退还差额，对差额部分核收退票费并执行现行退票费标准。上述计算的尾数以5角为单位，尾数小于2.5角的舍去、2.5角以上且小于7.5角的计为5角、7.5角以上的进为1元。退票费最低按2元计收。 <br
                        clear="none">
	        		5. 铁路乘意险保障您的出行。保障意外导致的身故伤残及相应医疗费用、意外伤害住院津贴、急性病身故责任。<br
                        clear="none">
	        		6. 请充分理解保险责任、责任免除、保险期间、合同解除等约定，详见保险条款。凭保单号或保单查询号登录<a
                        shape="rect" href="https://www.china-ric.com" target="_blank">www.china-ric.com</a>
                                    查看电子保单或下载电子发票。<br clear="none">
	        		7. 如因运力原因或其他不可控因素导致列车调度调整时，当前车型可能会发生变动。<br clear="none">
	        		8. 跨境旅客旅行须知详见铁路跨境旅客相关运输组织规则和车站公告。<br clear="none">
	        		9. 未尽事宜详见《国铁集团铁路旅客运输规程》等有关规定和车站公告。<br clear="none">
            </code>
            </span>
            </p>
            </div>
        </div>
    </div>
    <!--订单信息 结束-->

    <!--取消订单提醒-->
    <div id="cancelOrder" class="up-box w600" style="z-index: 20000; position: fixed; left: 459.5px; top: 30%;display: none">
        <div class="up-box-hd" style="background: #3b99fc">你确定要取消订单嘛？</div>
        <div class="up-box-bd" style="background: #eeeeee"><div class="up-con clearfix"><!-- <span class="icon i-work"></span> -->
            <div class="r-txt">
                <p class="ft14" style="font-weight: 700;font-size: 16px">
                    取消订单后，订单数据将无法恢复。<br clear="none">
                    每位乘客一天只能最多取消三次订单。<br clear="none">
                    超过三次将不允许继续购票！！！
                </p>
            </div>
        </div>
            <div class="lay-btn">
                <a href="javascript:" class="btn92"  shape="rect"  style="background: #fff8f8" id="no_cancel">取消</a>
                <a href="javascript:" class="btn92s" shape="rect" style="background:#FF8000FF" id="confirm_cancel">确认</a>
            </div>
        </div>
    </div>
</div>
<!--引入底部footer.html文件-->
<div id="footer"></div>
<script>
    // 使用AJAX加载底部文件
    $(function() {
        $.ajax({
            url: '/home/footer.html',
            type: 'GET',
            success: function(data) {
                $('#footer').html(data);
            },
            error: function() {
                console.log('加载底部文件失败');
            }
        });
    });
</script>

<script>
        // 创建Vue实例
        new Vue({
            el: '#main_content',
            data: {
                orderInfo: {
                    order_id: '',
                    train_number: '',
                    departure_date: '',
                    total_price: 0,
                    tickets: []
                },
                trainInfo: {
                    start_station: '',
                    end_station: '',
                    departure_time: '',
                    arrive_time: ''
                },
                payTime: 100,
                errorMsg: null
            },
            mounted() {
                console.log('Vue组件已挂载，准备调用getOrderInfo');
                // 在组件挂载后，调用方法获取订单信息
                this.getOrderInfo();
            },
            methods: {
                // 获取订单信息
                getOrderInfo() {
                    console.log('开始调用getOrderInfo方法');
                    // 从URL中获取订单ID参数
                    const urlParams = new URLSearchParams(window.location.search);
                    const order_id = urlParams.get('order_id') || urlParams.get('order_no');
                    console.log('从URL获取的订单ID:', order_id);

                    if (order_id) {
                        console.log('订单ID存在，准备发送请求');

                        try {
                            // 发送GET请求获取订单信息
                            axios.get('/home/order/getOrderInfo', {
                                params: {orderId: order_id}
                            }).then(response => {
                                console.log('成功接收到响应:', response);

                                // 处理返回的数据
                                const orderData = response.data;
                                console.log('响应数据结构:', orderData);

                                // 根据实际返回的数据格式，检查code是否为200表示成功
                                if (orderData && orderData.code === 200 && orderData.data) {
                                    // 获取响应中的订单数据
                                    const orderInfo = orderData.data;
                                    console.log('获取到的订单信息:', orderInfo);

                                    // 映射基本订单信息
                                    this.orderInfo.order_id = order_id; // 直接使用URL中的order_id
                                    this.orderInfo.total_price = orderInfo.orderPrice || 0;

                                    // 添加订单创建时间到orderInfo对象
                                    // 从后端返回的数据中获取createTime字段
                                    this.orderInfo.createTime = orderInfo.createTime || undefined;
                                    console.log('订单创建时间:', this.orderInfo.createTime);

                                    // 从ticket对象中获取车次相关信息
                                    if (orderInfo.ticket) {
                                        // 由于返回的数据中没有直接的trainNumber字段，使用trainNumberId或ticketId替代
                                        this.orderInfo.train_number = orderInfo.ticket.trainNumberId || orderInfo.ticketId || '未知车次';

                                        // 设置出发日期
                                        if (orderInfo.ticket.departureTime) {
                                            try {
                                                // 处理时间字符串
                                                let departureDate = new Date(orderInfo.ticket.departureTime);

                                                // 确保日期有效
                                                if (!isNaN(departureDate.getTime())) {
                                                    this.orderInfo.departure_date = departureDate.getFullYear() + '-' +
                                                                                   (departureDate.getMonth() + 1).toString().padStart(2, '0') + '-' +
                                                                                   departureDate.getDate().toString().padStart(2, '0');

                                                    // 设置时间信息
                                                    this.trainInfo.departure_time = departureDate.getHours().toString().padStart(2, '0') + ':' +
                                                                                     departureDate.getMinutes().toString().padStart(2, '0');
                                                }
                                            } catch (e) {
                                                console.error('日期格式错误:', e);
                                            }
                                        }

                                        // 设置到达时间
                                        if (orderInfo.ticket.arrivalTime) {
                                            try {
                                                let arrivalTime = new Date(orderInfo.ticket.arrivalTime);

                                                if (!isNaN(arrivalTime.getTime())) {
                                                    this.trainInfo.arrive_time = arrivalTime.getHours().toString().padStart(2, '0') + ':' +
                                                                                   arrivalTime.getMinutes().toString().padStart(2, '0');
                                                }
                                            } catch (e) {
                                                console.error('日期格式错误:', e);
                                            }
                                        }

                                        // 设置站点信息（由于返回的是ID，我们需要提供默认值）
                                        this.trainInfo.start_station = this.getStationNameById(orderInfo.ticket.startStationId);
                                        this.trainInfo.end_station = this.getStationNameById(orderInfo.ticket.arrivalStationId);
                                    }

                                    // 处理乘车人信息
                                    if (orderInfo.orderPassengerDTOList && orderInfo.orderPassengerDTOList.length > 0) {
                                        this.orderInfo.tickets = orderInfo.orderPassengerDTOList.map((passenger, index) => {
                                            return {
                                                sort: index + 1,
                                                passenger_name: passenger.passengerName || '',
                                                card_type: '身份证', // 默认身份证
                                                card_code: passenger.idCard ? this.maskIdCard(passenger.idCard) : '',
                                                ticket_type: passenger.passengerType !== undefined ? passenger.passengerType : 0,
                                                seat_type_name: this.getSeatTypeName(orderInfo.ticket),
                                                carriage_number: passenger.carriageNumber || '',
                                                seat_number: passenger.seatNumber || '',
                                                ticket_price: orderInfo.ticket ? orderInfo.ticket.ticketPrice : 0
                                            };
                                        });

                                        // 计算总票价 = 票价 * 乘车人数量
                                        if (orderInfo.ticket && orderInfo.ticket.ticketPrice) {
                                            this.orderInfo.total_price = (orderInfo.ticket.ticketPrice * orderInfo.orderPassengerDTOList.length).toFixed(2);
                                        } else {
                                            this.orderInfo.total_price = '0.00';
                                        }
                                    }

                                    console.log('处理后的订单信息:', this.orderInfo);
                                    console.log('处理后的列车信息:', this.trainInfo);

                                    this.startCountdown();
                                } else {
                                    this.errorMsg = orderData ? orderData.message : '获取订单信息失败';
                                }
                            })
                            .catch(error => {
                                console.error('获取订单信息失败:', error);
                                this.errorMsg = '获取订单信息失败，请稍后重试';
                            });
                        } catch (generalError) {
                            console.error('捕获到未预期的错误:', generalError);
                            this.errorMsg = '获取订单信息时发生未知错误';
                        }
                    } else {
                        this.errorMsg = '无法获取订单信息，请检查URL参数';
                    }
                },

                // 身份证号码脱敏
                maskIdCard(idCard) {
                    if (!idCard) return '';
                    if (idCard.length <= 8) return idCard;
                    return idCard.substring(0, 4) + '********' + idCard.substring(idCard.length - 4);
                },

                // 根据站点ID获取站点名称
                getStationNameById(stationId) {
                    // 由于我们没有实际的站点数据映射，这里返回站点ID或默认值
                    // 实际应用中应该从服务器获取站点数据映射
                    return stationId || '未知站点';
                },

                // 获取席别名称
                getSeatTypeName(ticket) {
                    // 根据carriageType映射席别名称
                    if (ticket && ticket.carriageType !== undefined) {
                        const seatTypeMap = {
                            1: '一等座',
                            2: '二等座',
                            3: '商务座',
                            4: '硬座',
                            5: '硬卧',
                            6: '软卧'
                        };
                        return seatTypeMap[ticket.carriageType] || '未知席别';
                    }
                    return '未知席别';
                },

                // 开始倒计时
                startCountdown() {
                    if (this.orderInfo.order_id) {
                        try {
                            // 尝试从orderInfo中获取订单创建时间
                            // 如果getOrderInfo方法还没有处理createTime，这里会是undefined
                            let createTime = this.orderInfo.createTime;

                            // 如果没有创建时间，我们将使用当前时间作为订单创建时间
                            // 在实际应用中，应该从getOrderInfo返回的数据中获取
                            if (!createTime) {
                                console.warn('未找到订单创建时间，使用当前时间作为订单创建时间');
                                createTime = new Date().toISOString();
                            }

                            // 计算过期时间：创建时间 + 30分钟
                            const createTimestamp = new Date(createTime).getTime();
                            const halfHourInMs = 30 * 60 * 1000;
                            const expireTimestamp = createTimestamp + halfHourInMs;
                            const currentTimestamp = Date.now();

                            // 计算剩余时间（秒）
                            let remainingSeconds = Math.floor((expireTimestamp - currentTimestamp) / 1000);

                            // 确保剩余时间不为负数
                            remainingSeconds = Math.max(remainingSeconds, 0);

                            // 开始倒计时
                            let countdownInterval = setInterval(() => {
                                // 每秒更新剩余时间
                                remainingSeconds--;

                                if (remainingSeconds <= 0) {
                                    // 倒计时结束
                                    clearInterval(countdownInterval);
                                    $('#ShowTime').text("订单已过期");
                                    this.cancelOrderDueToTimeout();
                                    return;
                                }

                                // 计算分和秒
                                const minutes = Math.floor(remainingSeconds / 60);
                                const seconds = remainingSeconds % 60;

                                // 格式化显示
                                const formattedTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                                $('#ShowTime').text(formattedTime);
                            }, 1000);
                        } catch (error) {
                            console.error('计算倒计时失败:', error);
                            // 如果计算失败，显示默认倒计时
                            $('#ShowTime').text("29:59");
                        }
                    } else {
                        console.warn('订单ID不存在，无法启动倒计时');
                    }
                },

                // 订单超时取消
                cancelOrderDueToTimeout() {
                    const orderId = this.orderInfo.order_id;
                    axios.put(`/home/order/cancelOrder/${orderId}`)
                    .then(response => {
                        if (response.data) {
                            $('#ShowTime').text("订单已过期");
                        } else {
                            alert("订单超时取消失败！！！");
                        }
                    })
                    .catch(error => {
                        alert("网络错误，请检查你的网络！");
                    });
                    this.payTime = 0;
                },

                // 支付订单
                paymentOrder() {
                    // 获取订单号和总价
                    const orderId = this.orderInfo.order_id;
                    const totalPrice = this.orderInfo.total_price;
                    
                    // 构建跳转到alipay.html的URL，传递订单号和总价作为查询参数
                    const alipayUrl = `../order/alipay.html?order_id=${orderId}&total_price=${totalPrice}`;
                    
                    // 跳转到alipay.html页面
                    window.location.href = alipayUrl;
                },

                // 取消订单
                cancelOrder() {
                    // 显示确认对话框
                    if (confirm("确定要取消此订单吗？")) {
                        const orderId = this.orderInfo.order_id;
                        axios.put(`/home/order/cancelOrder/${orderId}`)
                        .then(response => {
                            if (response.data) {
                                alert("订单取消成功！");
                                // 跳转到首页
                                window.location.href = "http://localhost:80/home/index.html";
                            } else {
                                alert("订单取消失败！");
                            }
                        })
                        .catch(error => {
                            alert("网络错误，请检查你的网络！");
                        });
                    }
                }
            }
        });
    </script>
</body>
</html>



